<template>
	<div class="returnVisitcontainer">
		<el-dialog	
			  :visible.sync="isShow"			 
			  custom-class="el-dialog-bg"
			  :before-close="handleClose">
			  <div slot="title" class="panel_title">跟踪回访</div>
			  <div class="visitinfo">
			  	<div class="stuInfo">
			  		<el-row>
			  			<el-col :span="8">
			  				<span>学员姓名：</span>
			  				<span>{{stuInfo.name}}</span>
			  				<span>&nbsp;&nbsp;<i class="el-icon-warning"></i></span>
			  			</el-col>
			  			<el-col :span="8">
			  				<span>家长：</span>
			  				<span>{{stuInfo.parent}}</span>
			  			</el-col>
			  			<el-col :span="8">
			  				<span>联系电话：</span>
			  				<span>{{stuInfo.linkphone}}</span>
			  			</el-col>
			  		</el-row>
			  	</div>
			  	<div class="returnSingle">
			  		<template>
						  <el-table									  	
						    :data="visitcontent"	
						    height="110"
						    size="mini"
						    row-class-name="rowheight"
						    border
						    style="width: 100%">
						    <el-table-column
						      prop="visitdate"
						      label="回访日期"
						      >
						     <template slot-scope="{row,$index}"> 
						     	<input class="edit-cell" v-model="row.visitdate"> 						     		  
						     </template>

						    </el-table-column>
						    <el-table-column
						      prop="visitcontent"
						      label="回访内容"
						     >
						     <template slot-scope="{row,$index}"> 
						     	<input class="edit-cell" v-model="row.visitcontent"> 						     		  
						     </template>
						    </el-table-column>
						    <el-table-column
						      prop="visitresult"
						      label="回访结果"						     
						      >
						      <template slot-scope="{row,$index}"> 
						     	<input class="edit-cell" v-model="row.visitresult"> 						     		  
						      </template>
						    </el-table-column>
						    <el-table-column
						      prop="merchandiser"
						      label="跟单员"						      
						      >
						      <template slot-scope="{row,$index}"> 
						     	<input class="edit-cell" v-model="row.merchandiser"> 						     		  
						      </template>
						    </el-table-column>
						    <el-table-column
						      prop="operator"
						      label="操作人"					     
						      >
						      <template slot-scope="{row,$index}"> 
						     	<input class="edit-cell" v-model="row.operator"> 						     		  
						      </template>
						    </el-table-column>
						    <el-table-column
						      prop="threadstate"
						      label="线索状态"					     
						      >
						      <template slot-scope="{row,$index}"> 
						     	<input class="edit-cell" v-model="row.threadstate"> 						     		  
						      </template>
						    </el-table-column>
						    <el-table-column
						      prop="nextvisitime"
						      label="下次回访时间"					     
						      >
						      <template slot-scope="{row,$index}"> 
						     	<input class="edit-cell" v-model="row.nextvisitime"> 						     		  
						     </template>
						    </el-table-column>
						  </el-table>
					</template>
			  	</div>
			    <div class="line"></div>
			    <div class="threadset">
			    	<span class="threadfontsize">线索状态</span>
			    	<el-select v-model="threadtext" size="mini" style="width:20%" placeholder="线索状态">
					    <el-option
					      v-for="item in threadstate"					     
					      :key="item.value"					      
					      :label="item.name"
					      :value="item.value">
					    </el-option>
  					</el-select>
  					<el-checkbox v-model="checked" style="margin-left:5%;">设为重要线索</el-checkbox>
			    </div>
			    <div class="visitbox">
			    	<el-row>
			    		<el-col :span="12">
			    			<div class="title">
			    				<span style="color:red;">*</span>
			    				<span>回访内容</span>
			    			</div>
			    			<div class="content">
			    				<el-input
								  type="textarea"
								  :rows="5"
								  placeholder="请输入沟通内容"
								  v-model="visittext">
								</el-input>
			    			</div>
			    		</el-col>
			    		<el-col :span="12">
			    			<div class="title">			    				
			    				<span>回访结果</span>
			    			</div>
			    			<div class="content">
			    				<el-input
								  type="textarea"
								  :rows="5"
								  placeholder="请输入沟通内容"
								  v-model="visitresulttext">
								</el-input>
			    			</div>
			    		</el-col>
			    	</el-row>
			    </div>
			    <div class="returnvisitbox">
			    	<span>下次回访日期</span>
			    	<el-date-picker
				      v-model="returnvisidate"
				      size="mini"
				      type="date"
				      placeholder="选择日期">
				    </el-date-picker>
			    </div>
			  </div>
		      <div slot="footer" class="footer-btn">
		      	 <el-button @click="btnCancel">取 消</el-button>
    			 <el-button type="primary" @click="btnOk">确 定</el-button>
		      </div>
		</el-dialog>
		
		
    </div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	export default {
		data(){
			return {
				checked:false,
				visittext:'',
				visitresulttext:'',
				returnvisidate:'',
				threadtext:''
			}
		},
		
		methods:{
			/**
			 * 关闭对话框
			 */
			handleClose(){
				this.$store.dispatch('returnvisit/hidesvisitPanel');				
			},
			/**
			 * 取消
			 */
			btnCancel(){
				this.$store.dispatch('returnvisit/hidesvisitPanel');
			},
			/**
			 * 确定
			 */
			btnOk(){
				this.$store.dispatch('returnvisit/hidesvisitPanel');
			}
		},
		computed:{
		
    	 ...mapState({                            
					  isShow:state=>state.returnvisit.visitDialog					
					}),
		 ...mapGetters('returnvisit', {
				      stuInfo: 'getStuInfo',
				      visitcontent:'getVisitcontent',
				      threadstate:'getThreadstate'
    				})			
		

      }
	}
	
</script>

<style lang="scss">
	.returnVisitcontainer{
	
	    .visitinfo{
	    	width:100%;
			height: 5.5rem;
			padding:0 .3rem 0 .3rem;
			.stuInfo{
				width:100%;
				height: .5rem;
				line-height: .5rem;
				font-size: .15rem;				
			}
			.returnSingle{
				width:100%;
				height: 1.1rem;				
				font-size: .15rem;	
				.edit-cell{
					border:none;
					width:100%;
					height:100%;
					outline: none;
				}				
			}
			.line{
				width:100%;
				height: 1px;
				background: #DEDEDE;
				margin:.3rem 0 .3rem 0;
			}	
			.threadset{
				width:100%;
				height: .5rem;
				line-height: .5rem;
				.threadfontsize{
					font-size:.15rem;
				}
			}
			.visitbox{
				width:100%;
				height: 1.5rem;
				margin-top:.2rem;			
				.el-row{
					.title{
						width:100%;
						height: .3rem;
						line-height: .3rem;
						font-size: .15rem;						
					}
					.content{
						width:95%;						
						height: 1.2rem;						
					}
				}								
			}
			.returnvisitbox{
				width:100%;
				height: .5rem;			
				line-height: .5rem;
				margin-top:.2rem;		
			}
			
	    }
		/**自定义对话框标题样式**/
		.panel_title{				
			padding:.23rem .31rem .23rem .31rem;
			font-size: .22rem;	
		    font-family: "microsoft yahei";
		    color: #333333;		
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #FFFFFF;
			width:9rem;
			border-radius: .1rem;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px !important;
			}	
			.el-dialog__footer{
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
	}
</style>